import React, { useState, useImperativeHandle, forwardRef, useEffect } from 'react';
import { Row, Col, Button, Space, Tabs } from 'antd';
import { connect } from 'umi';
import { goodsType_status } from '@/common/contact'
import TableDataBlock from '@/components/TableDataBlock';
import SelectModel from './components/SelectModel'
import Select from '@/components/FormCondition/Select'
import Input from '@/components/FormCondition/InputNumber'
import FormItem from 'antd/es/form/FormItem';
const RenderTable = (props) => {
  const { list, index, data, setData, dataInput, setDataInput } = props
  useEffect(() => {
    setDataInput({ ...dataInput, [index]: { chooseType: 'all' } })
  }, [])
  const { chooseType = 'all', chooseAmount } = dataInput[index] || {}
  const getColumns = [
    {
      title: '商品名称',
      dataIndex: 'goodsName',
    }, {
      title: '商品类型',
      dataIndex: 'goodsType',
      render: (val) => {
        return goodsType_status[val]
      },

    }, {
      type: 'handle',
      width: 200,
      dataIndex: 'id',
      render: (val, record) => [
        {
          title: '移除',
          click: () => {
            const { goodsType } = record
            setData({
              ...data,
              [goodsType]: data[goodsType].filter(item => {
                return item.id !== val
              })
            })
          }
        }]
    }]
  return <Space style={{ width: '100%' }} direction={'vertical'}>
    <Row>
      <Col span={8}>
        <Space>
          选择打包方式:
          <Select style={{ width: 120 }} select={{
            all: '全部',
            any: '任意'
          }} onChange={(e) => {
            setDataInput({ ...dataInput, [index]: { chooseType: e } })
          }} value={chooseType}></Select>
        </Space>

      </Col>
      {chooseType === 'any' && <Col offset={2} span={8}>
        <Space>
          输入打包数量:
          <Input onChange={(e) => {
            setDataInput({ ...dataInput, [index]: { ...dataInput[index], chooseAmount: e } })
          }} style={{ width: 120 }} max={list.length} value={chooseAmount}></Input>
        </Space>
      </Col>}

    </Row>
    <TableDataBlock
      cardProps={{ title: goodsType_status[index] }}
      columns={getColumns}
      rowKey={(record) => `${record.id}`}
      list={list}
    ></TableDataBlock>
  </Space>
}
const SettingOpeational = (props, ref) => {
  const { onChange, detail = {}, defaultDataList = [], disabled = false, } = props
  const [data, setData] = useState({})
  const [dataInput, setDataInput] = useState({})
  const [visible, setVisible] = useState(false)
  const RenderTableProps = {
    data,
    setData,
    dataInput,
    setDataInput
  }
  useEffect(() => {
    if (defaultDataList.length > 0) {
      let dataObj = {}
      let inputDataObj = {}
      defaultDataList.forEach(item => {
        const { packageGoodsType, packageGoodsInfo = '[]', chooseAmount, chooseType
        } = item
        let packageList = JSON.parse(packageGoodsInfo)
        inputDataObj[packageGoodsType] = { chooseAmount, chooseType }
        dataObj[packageGoodsType] = packageList.map(val => {
          return {
            ...val,
            skuid: val.skuId,
            id: val.goodsId
          }
        })
      })
      setData(dataObj)
      setDataInput(inputDataObj)
    }

  }, [defaultDataList])
  useImperativeHandle(ref, () => {
    return {
      getPackaging: () => {
        if (Object.values(data).length > 0) {
          return Object.keys(data).map(item => {
            return {
              packageGoodsType: item,
              chooseType: dataInput[item]?.chooseType || 'all',
              chooseAmount: dataInput[item]?.chooseAmount,
              packageGoodsInfo: data[item]?.map(val => {
                return {
                  goodsId: val.id,
                  skuId: val.skuid,
                  // goodsName: val.goodsName,
                  // goodsType: val.goodsType,
                  // skuProperty: val.skuProperty
                }
              })
            }
          })
        }
        else return []
      }
    }
  })
  const tabList = Object.keys(data).map((item, index) => {
    if (data[item] && data[item].length > 0) {
      return ({
        label: goodsType_status[item],
        key: item,
        children: <RenderTable {...RenderTableProps} key={index} index={item} list={data[item]}></RenderTable>
      })
    }
    else {
      return null
    }
  })
  return (
    <Row style={{ marginBottom: 24 }}>
      <Col style={{ textAlign: 'right' }} span={6}>
        打包售卖:
      </Col>
      <Col style={{ marginLeft: 4 }} gutter={[24, 24]}>
        <Button
          disabled={disabled}
          onClick={() => {
            setVisible({ show: true, details: data });
          }}
        >

          +添加打包商品
        </Button>
      </Col>
      {Object.values(data).length > 0 && <Col style={{ marginTop: 12 }} offset={6} span={18}>
        <Tabs
          tabPosition={'top'}
          items={
            tabList
          }
        >
        </Tabs>
      </Col>}

      <SelectModel onOk={setData} visible={visible} data={detail} onClose={() => setVisible(false)}></SelectModel>
    </Row>
  )
};
export default forwardRef(SettingOpeational)